import { Space, } from 'antd';
import { v1 as uuid } from 'uuid';

import 'react-responsive-carousel/lib/styles/carousel.min.css';
import { Carousel } from 'react-responsive-carousel';

export type carouselAttributes = {
  imgSrc: string,
  imgLegend?: string
}

interface carouselProp {
  imgs: carouselAttributes[]
}

export default ({ imgs }: carouselProp) => {
  return (
    <Space>
      <Carousel
        showArrows={true}
        showThumbs={false}
        infiniteLoop={true}
      >
        {imgs.map((item) => {
          return (
            <div key={uuid()}>
              <img
                alt=''
                src={item.imgSrc}
              />
              {item.imgLegend ? <p className='legend'>{item.imgLegend}</p> : null}
            </div>
          )
        })}
      </Carousel>
    </Space>
  );
}